<template>
	<el-popover
		v-if="hasChildren"
		:width="200"
		placement="right-start"
		trigger="hover"
		:effect="popoverEffect"
		:show-after="200"
		:popper-class="$style['el-popover-silde']"
		:teleported="false"
	>
		<template #reference>
			<el-menu-item
				class="el-menu-group"
				:index="firstChildren.path || firstChildren.title"
				:route="firstChildren.path"
			>
				<v-icon :name="data.icon" v-if="hasIcon" right size="1em" color="inherit"></v-icon>
				<div class="name">{{ data.title }}</div>
				<div class="arrow"></div>
			</el-menu-item>
		</template>
		<v-menu-item v-for="item in data.children" :key="item.id" :data="item"></v-menu-item>
	</el-popover>
	<el-menu-item v-else v-ripple :index="data.path || data.title" :route="data.path">
		<v-icon :name="data.icon" v-if="hasIcon" right size="1em" color="inherit"></v-icon>
		{{ data.title }}
	</el-menu-item>
</template>

<script setup>
import { computed } from "vue"
import { useSettingStore } from "/store/setting"
import VMenuItem from "./popover-item.vue"

const props = defineProps({
	data: {
		type: Object,
	},
})

const hasChildren = computed(() => props.data.children && props.data.children.length > 0)
const hasIcon = computed(() => !!props.data.icon)
const firstChildren = computed(() => {
	if (!hasChildren.value)
		return {
			path: "",
			title: "",
		}
	return props.data.children[0]
})

const settingStore = useSettingStore()
const isDark = computed(() => settingStore.dark)
const popoverEffect = computed(() => (isDark.value ? "dark" : "light"))
</script>

<script>
export default {
	name: "v-menu-item",
}
</script>

<style lang="scss" scoped>
.el-menu-group {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.name {
		white-space: nowrap;
		width: 100%;
	}
	.arrow {
		position: relative;
		width: 7px;
		height: 7px;
		border-bottom: 1px solid currentColor;
		border-right: 1px solid currentColor;
		transform: rotate(-45deg);
		flex: none;
		transition: var(--transition);
	}
	&:hover {
		.arrow {
			transform: rotate(-45deg) rotateY(180deg) rotateX(180deg);
		}
	}
}
</style>
<style lang="scss" module>
.el-popover-silde {
	padding: 5px 0 !important;
	--el-menu-item-height: 36px;
}
</style>
